<template>
  <div class="securityConfigContainer">
    <div class="itemContainer clearfix">
      <div style="background-color:white; float:left;" class="clearfix">
      <div class="label">
        <span>手机:</span>
      </div>
      <div class="contentConfig">
        <span>13716338569</span>
      </div>
      </div>
      <div class="config" @click="modifyPhome">
        <span>修改</span>
      </div>
    </div>
    <div class="itemContainer clearfix">
      <div style="background-color:white; float:left;" class="clearfix">
      <div class="label">
        <span>实名认证:</span>
      </div>
      <div class="contentConfig">
        <span>未认证</span>
      </div>
      </div>
      <div class="config" @click="verifyCertification">
        <span>立即实名</span>
      </div>
    </div>
    <div class="itemContainer clearfix">
      <div style="background-color:white; float:left;" class="clearfix">
      <div class="label">
        <span>登录密码:</span>
      </div>
       <div class="contentConfig">
        <span>未设置</span>
      </div>
      </div>
      <div class="config" @click="modifyPassword">
        <span>修改</span>
      </div>
    </div>
    <div class="itemContainer clearfix">
      <div style="background-color:white; float:left;" class="clearfix">
      <div class="label">
        <span>支付密码:</span>
      </div>
      <div class="contentConfig">
        <span>未设置</span>
      </div>
      </div>
      <div class="config" @click="payCheckSet">
        <span>设置</span>
      </div>
    </div>
  </div>
</template>
<style scoped>
.securityConfigContainer {
background-color: #D9EDEB;
height: 500px;
}

.securityConfigContainer::before ,
.securityConfigContainer::after{
  content: "";
  display: table;
  clear: both;
}

.itemContainer {
  margin-top: 20px;
  margin-left: 100px;
}

.contentConfig {
  float: right;
  text-align: right;
  width: 200px;
  margin-right: 10px;
  color: #7e7e7e;
}

.config {
  float: left;
  text-align: left;
  width: 100px;
  color: #B00A0A;
  margin-left: 10px;
}

.label {
  text-align: left;
  float: left;
  margin-left: 10px;
  width: 100px;
  color: #7e7e7e;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>
<script>
export default {
  methods: {
    modifyPhome: function() {
      this.$router.push({ path: 'mine/confirmphone' })
    },
    verifyCertification: function() {
      this.$router.push({ path: 'mine/verifycertification' })
    },
    modifyPassword: function() {
      this.$router.push({ path: 'mine/modifypassword' })
    },
    payCheckSet: function() {
      this.$router.push({ path: 'mine/paycheckset' })
    },
    payCheckModify: function() {
      this.$router.push({ path: 'mine/paycheckmodify' })
    }
  }
}
</script>
